<template>
    <div class="mapChart">
        <ECharts
            ref="diseaseMap"
            class="chart"
            :option="option"
            :autoresize="true"
            ></ECharts>
    </div>
</template>
<script>
import ECharts from "vue-echarts";
import getOptions from "./option.js";
import mapJson from "./110000.json";

export default {
    data() {
        return {
            color: [
                ["#FF3C3C", "#FF926B", "#FDDD4A", "#FFF9EE"],
                ["#655FE0", "#e0dfff"],
                ['#1799C2', "#c9ebf6"],
                ['#49A0F6', "#d9ecff"],
                    

            ]
        }
    },
    components: {
        ECharts
    },
    props: {
        data: {
            type: Array,
            default: () => [
                 {
                    name: "东城区",
                    regionCode: "110100",
                    value: "89"
                },
                {
                    name: "西城区",
                    regionCode: "110200",
                    value: "60"
                },
                {
                    name: "朝阳区",
                    regionCode: "110300",
                    value: "34"
                },
            ]
        },
        activeIndex: {
            type: Number,
            default: 0
        }
    },
    computed: {
        option() {
            let colorList = this.color[this.activeIndex]
            return getOptions(colorList, this.data);
        }
    },
    // watch: {
    //     data: {
    //         handler(val) {
    //             console.log(val);
    //         },
    //         deep: true
    //     },

    // },
    methods: {
        registerMap() {
            this.$echarts.registerMap('110000', mapJson);
        },
        getOptions() {

        }
    },
    mounted() {
        this.registerMap();
    }
}
</script>
<style lang="less" scoped>
.mapChart {
    width: 100%;
    height: 100%;
}
</style>